<template>
	<view class="column-css">
		<view style="width: 100%; height: 20rpx;background: #f6f6f6;"></view>
		<uni-steps
			style="padding: 20rpx 0;"
			activeColor="#FB8536"
			:options="[{ nodeName: '上传证件' }, { nodeName: '补全个人资料' }, { nodeName: '开卡完成' }]"
			:active="0"
		></uni-steps>
		<view>
			<view style="margin: 0 40rpx;margin-bottom: 20rpx;color: #C8C7CC;">正在为您开通平安银行互联网账户(II类户)，开户需要用到您的身份证</view>

			<!-- <text style="color: #FA5051;margin-left: 30rpx;font-size: 24rpx;" v-if="peopleimage != '../../static/icon_people.png' && guohuiimage != '../../static/icon_guohui.png'">
				若识别有误，点击图片重新上传
			</text> -->
		</view>
		<view class="column-css" style="align-items: center;">
			<image style="margin: 10rpx 20rpx;width: 470rpx;height: 290rpx;" :src="peopleimage" :data-src="peopleimage" @tap="chooseImage(1)"></image>
			<view style="margin-bottom: 20rpx;">
				点击
				<text v-if="peopleimage != '../../static/icon_people.png'">重新</text>
				上传身份证人像面
			</view>
			<image style="margin: 10rpx 20rpx;width: 470rpx;height: 290rpx;" :src="guohuiimage" :data-src="guohuiimage" @tap="chooseImage(2)"></image>
			<view style="margin-bottom: 20rpx;">
				点击
				<text v-if="guohuiimage != '../../static/icon_guohui.png'">重新</text>
				上传身份证国徽面
			</view>
		</view>

		<view style="margin: 0 40rpx;margin-bottom: 20rpx;color: #C8C7CC;">我确认该身份证影像是本人名下最新且有效的身份证影像</view>

		<view class="row-css" style="width: 100%;margin: 60rpx 0;">
			<!-- <button class="mini-btn" type="primary" size="default" style="padding: 0 100rpx;" @click="getDocumentUrl()">查看合同</button> -->
			<button
				class="mini-btn"
				v-if="peopleimage == '../../static/icon_people.png' || guohuiimage == '../../static/icon_guohui.png'"
				style="background: #C8C7CC;"
				type="primary"
				size="default"
				@click="onnext()"
			>
				下一步
			</button>
			<button v-else class="mini-btn" style="background: #FB8536;" type="primary" size="default" @click="onnext()">下一步</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userphone: '',
			trueName: '',
			idNo: '',
			mobilePhone: '',
			address: '',
			frontSide: '',
			backSide: '',
			peopleimage: '../../static/icon_people.png',
			guohuiimage: '../../static/icon_guohui.png'
		};
	},
	onLoad() {
		this.wxRequest({
			url: `${this.API}/mini/erLeiHu/autoUploadIdCard`,
			method: 'POST',
			data: {
				driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId
			},
			title: '加载中...',
			success: res => {
				this.peopleimage = res.data.data.idcard1;
				this.trueName = res.data.data.name;
				this.idNo = res.data.data.id;
				this.address = res.data.data.address;
				this.frontSide = res.data.data.fileId1;
				this.guohuiimage = res.data.data.idcard2;
				this.backSide = res.data.data.fileId2;
			}
		});
	},
	methods: {
		chooseImage: async function(index) {
			// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
			uni.chooseImage({
				count: 1,
				sizeType: 'compressed',
				success: res => {
					console.log('dddd:', res);
					uni.showLoading({
						title: '上传中'
					});
					if (index == 1) {
						// uni.getFileInfo({
						// 	filePath : res.tempFilePaths[0],
						// 	digestAlgorithm: "md5",
						// 	success: function (res) {
						// 		console.log("dddd MD5  ", res);
						// 	}
						// });
						let peopleimg = res.tempFilePaths[0];
						console.log('sss=', `${this.API}/mini/erLeiHu/uploadIdCardFront`);
						uni.uploadFile({
							url: `${this.API}/mini/erLeiHu/uploadIdCardFront`,
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '2',
								mobile: this.mobilePhone,
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								orderId: ''
							},
							success: res => {
								uni.hideLoading();
								console.log('身份证正面: ', JSON.parse(res.data));
								if (JSON.parse(res.data).code == 0) {
									this.peopleimage = peopleimg;
									this.trueName = JSON.parse(res.data).data.name;
									this.idNo = JSON.parse(res.data).data.id;
									this.address = JSON.parse(res.data).data.address;
									this.frontSide = JSON.parse(res.data).data.fileId;
								} else {
									uni.showToast({
										title: JSON.parse(res.data).msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								console.log('身份证正面失败: ', error);
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					} else if (index == 2) {
						// uni.getFileInfo({
						// 	filePath : res.tempFilePaths[0],
						// 	digestAlgorithm: "md5",
						// 	success: function (res) {
						// 		console.log("dddd MD5  ", res);
						// 	}
						// });
						let guohuiimg = res.tempFilePaths[0];
						uni.uploadFile({
							url: `${this.API}/mini/erLeiHu/uploadIdCardBack`, //仅为示例，非真实的接口地址
							fileType: 'image',
							name: 'file',
							filePath: res.tempFilePaths[0],
							file: res.tempFiles,
							header: {
								'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
								authorization: uni.getStorageSync(this.DATA_KEY.token)
							},
							formData: {
								fileType: '3',
								mobile: this.mobilePhone,
								fileId: Math.floor(Math.random() * 1259),
								ocrOrNot: '1',
								orderId: ''
							},
							success: res => {
								console.log('身份证国徽面: ', JSON.parse(res.data));
								uni.hideLoading();
								if (JSON.parse(res.data).code == 0) {
									this.guohuiimage = guohuiimg;
									this.backSide = JSON.parse(res.data).data.fileId;
								} else {
									uni.showToast({
										title: JSON.parse(res.data).msg,
										icon: 'none'
									});
								}
							},
							fail: error => {
								uni.showToast({
									title: '文件上传失败',
									icon: 'none'
								});
							}
						});
					}
				}
			});
		},
		onnext() {
			// uni.navigateTo({
			// 	url: '../personal/perfectinformation'
			// });
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			var res = reg.test(this.idNo);
			// console.log('的士速递 ', res);
			if (this.peopleimage == '../../static/icon_people.png' || this.guohuiimage == '../../static/icon_guohui.png') {
				uni.showToast({
					title: '请上传身份证信息！',
					icon: 'none'
				});
				return;
			} else if (res == false) {
				uni.showToast({
					icon: 'none',
					title: '请上传正确的身份证信息！'
				});
				return;
			}

			this.wxRequest({
				url: `${this.API}/mini/erLeiHu/checkIdImageInfo`,
				method: 'POST',
				data: {
					idNo: this.idNo,
					frontSide: this.frontSide,
					backSide: this.backSide,
					trueName: this.trueName
				},
				title: '影像审核中...',
				success: res => {
					console.log('dsd-===============>', res.data.data.imageOrderNo);
					uni.navigateTo({
						url:
							'../personal/perfectinformation?trueName=' +
							this.trueName +
							'&idNo=' +
							this.idNo +
							'&imageOrderNo=' +
							res.data.data.imageOrderNo +
							'&address=' +
							this.address
					});
				}
			});
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
	font-size: 30rpx;
}

.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-centen-text {
	border-bottom: 1rpx solid #f1f1f1;
	padding: 20rpx 10rpx;
	flex: 1;
}

.view-cent {
	padding-left: 15upx;
	flex: 1;
	font-size: 30rpx;
	margin: 0 50rpx;
}

.mini-btn {
	width: 100%;
	background: #2979ff;
	font-size: 28rpx;
	padding: 10rpx 0;
	margin: 0 20rpx;
}
</style>
